<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>promise 队列</h1>

    <script>
      function query(num) {
        let promise1 = Promise.resolve()
        // promise1 是一个状态为成功的的promise 没有返回的值
        let promise2 = Promise.resolve('123')
        // promise2 是一个状态为成功的的promise 有返回的值 为 123
        console.log('promise1', promise1)
        console.log('promise2', promise2)
        num.map((v) => {
          //  这里 then 返回的也是 promise 状态也是成功的
          // 这时 m 里的值是   Promise.resolve返回过来的值 如果没有值就是undefined

          // 重点  promise1 = promise1.then
          // 这里 是map 他不会等待 promise 走完 才走下一个循环 他会把所有的宏任务都走完 不会理会 微任务
          // 在第一个循环的时候 把promise1的then的结果返回给 promise1
          // 这时promise1的then 的值是个promise 把这个promise 给了 promise1
          //  第二个循环开始 promise1 是个promise promise1.then的执行需要promise的状态改变后才开始执行
          promise1 = promise1.then((m) => {
            // console.log(m)
            // 这里 用return 的方法 把新的Promise 抛出
            return new Promise((resolve) => {
              setTimeout(() => {
                console.log(v)
                resolve()
              }, 1000)
            })
          })
          // 这里打印告诉我们 promise 是处于 挂起状态
          console.log('promise1——1', promise1)
        })
      }
      query([1, 2, 3, 4, 5, 6, 7, 8])

      // //////////////////////////////////////////////////////////////
      function query2(num) {
        let promise2 = Promise.resolve()
        console.log('promise2', promise2)
        num.map((v) => {
          promise2 = promise2.then((_) => {
            return v()
          })
        })
      }
      function p1() {
        return new Promise((resolve) => {
          setTimeout(() => {
            console.log('p1')
            resolve()
          }, 1000)
        })
      }
      function p2() {
        return new Promise((resolve) => {
          setTimeout(() => {
            console.log('p2')
            resolve()
          }, 1000)
        })
      }
      query2([p1, p2])
    </script>
  </body>
</html>
